<template>
	<!-- D:/project/app/ydz-app-uniapp/static/images/login -->
	<!-- D:/project/app/ydz-app-uniapp/static/images/home -->
	<view class="pagebody" :style="{ minheight: maxHeight }">
		<view class="headbox" style="background-color: #fff;">
			<view class="topbgbox">
				<NavHeader></NavHeader>
				<view class="flex-row justify-between" style="margin-top: 55rpx;">
					<view @click="towxcode" class="left">
						<view class="" style="font-weight: 800;font-size: 36rpx;color: #E3357D;">
							病友圈
						</view>
						<view class="" style="font-weight: 500;font-size: 24rpx;color: #E3357D;margin-top: 6rpx;">
							共抗病魔 温暖同行
						</view>
						<view class="gkjr">
							赶快加入
						</view>
					</view>
					<view class="right flex-col justify-between">
						<view class="toplm" @click="toCasepage">
							<view class="" style="font-weight: 800;font-size: 36rpx;color: #00A98B;">
								病例管理
							</view>
							<view class="" style="font-weight: 500;font-size: 24rpx;color: #00A98B;margin-top: 6rpx;">
								共抗病魔 温暖同行
							</view>
						</view>
						<view class="botlm" @click="toServe">
							<view class="" style="font-weight: 800;font-size: 36rpx;color: #F46E09;">
								消息提醒
							</view>
							<view class="" style="font-weight: 500;font-size: 24rpx;color: #F46E09;margin-top: 6rpx;">
								准时服药 健康相伴
							</view>
						</view>
					</view>
				</view>

				<view class="">
					<view class="uni-margin-wrap">
						<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
							:interval="interval" :duration="duration">
							<swiper-item>
								<ul class="flex-row align-center justify-between" style="">
									<li @click="chooseswiper(0)" class="flex-col">
										<image src="@/static/images/home/navzlzq.png" class=""
											style="width: 90rpx;height: 90rpx;">
										</image>
										<view class="color303b39 fz24 mt16">
											疾病专题
										</view>
									</li>
									<li @click="chooseswiper(1)" class="flex-col">
										<image src="@/static/images/home/navqqzy.png" class=""
											style="width: 90rpx;height: 90rpx;">
										</image>
										<view class="color303b39 fz24 mt16">
											全球找药
										</view>
									</li>
									<li @click="chooseswiper(2)" class="flex-col">
										<image src="@/static/images/home/navlczm.png" class=""
											style="width: 90rpx;height: 90rpx;">
										</image>
										<view class="color303b39 fz24 mt16">
											临床招募
										</view>
									</li>
									<li @click="chooseswiper(3)" class="flex-col">
										<image src="@/static/images/home/navgjyl.png" class=""
											style="width: 90rpx;height: 90rpx;">
										</image>
										<view class="color303b39 fz24 mt16">
											国际医疗
										</view>
									</li>
									<li @click="chooseswiper(4)" class="flex-col">
										<image src="@/static/images/home/navycwz.png" class=""
											style="width: 90rpx;height: 90rpx;">
										</image>
										<view class="color303b39 fz24 mt16">
											远程问诊
										</view>
									</li>
								</ul>
							</swiper-item>
							<swiper-item>
								<ul class="flex-row align-center justify-start" style="">
									<li @click="chooseswiper(5)" class="flex-col mr50 ">
										<image src="@/static/images/home/navzlxy.png" class=""
											style="width: 90rpx;height: 90rpx;">
										</image>
										<view class="color303b39 fz24 mt16">
											疾病新药
										</view>
									</li>
									<li @click="toWxkf" class="flex-col mr50">
										<image src="@/static/images/home/navzxzx.png" class=""
											style="width: 90rpx;height: 90rpx;">
										</image>
										<view class="color303b39 fz24 mt16">
											在线咨询
										</view>
									</li>
								</ul>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<image src="@/static/images/home/tjhyBanner.png" @click="toWxkf"
					style="width: 700rpx; height: 200rpx;margin-top: 32rpx;">
				</image>
			</view>
		</view>
		<!-- 		<view class="recommend">
			<view class="title" style="">
				<view style="font-weight: 800;font-size: 40rpx;color: #303B39;z-index: 99;position: relative;">
					{{userDocument.diseaseName}}知识
					<view class="pos-abs titleline">
					</view>
				</view>
				<view @click="tomore(1)" class="more">更多<image src="@/static/images/home/more.png" class=""
						style="width: 32rpx;height: 32rpx;">
					</image>
				</view>
			</view>

			<ul class="recomlist">
				<li class="recomli" v-for="(item,index) in zsNewsList" :key="index">
					<view class="leftbox">知</view>
					<view class=" righttext lineclamp2" @click="toNews(item.id)">
						{{item.name}}
					</view>
				</li>
			</ul>
		</view> -->
		<typenews :type="1" :disname="userDocument.diseaseName" :disid="userDocument.diseaseId" :list="zsNewsList">
		</typenews>
		<typenews :type="2" :disname="userDocument.diseaseName" :disid="userDocument.diseaseId" :list="znNewsList">
		</typenews>
		<!-- 		<view class="recommend">
			<view class="title" style="">
				<span
					style="font-weight: 800;font-size: 40rpx;color: #303B39;z-index: 99;position: relative;">{{userDocument.diseaseName}}疾病指南
					<view class="pos-abs titleline">
					</view>
				</span>
				<view @click="tomore(2)" class="more">更多<image src="@/static/images/home/more.png" class=""
						style="width: 32rpx;height: 32rpx;">
					</image>
				</view>
			</view>

			<ul class="recomlist">
				<li class="recomli" v-for="(item,index) in znNewsList" :key="index">
					<view class="leftbox">指</view>
					<view class=" righttext lineclamp2" @click="toNews(item.id)">
						{{item.name}}
					</view>
				</li>
			</ul>
		</view> -->
		<view class="recommend" style="background: #EDFCF9;">
			<view class="title" style="">
				<span
					style="font-weight: 800;font-size: 40rpx;color: #303B39;z-index: 99;position: relative;">{{userDocument.diseaseName}}药品
					<view class="pos-abs titleline">
					</view>
				</span>
				<view @click="tomore(3)" class="more">更多<image src="@/static/images/home/more.png" class=""
						style="width: 32rpx;height: 32rpx;">
					</image>
				</view>
			</view>
			<DrugList :drugList="drugList"></DrugList>
		</view>


		<view class="recommend">
			<view class="title" style="">
				<span style="font-weight: 800;font-size: 40rpx;color: #303B39;z-index: 99;position: relative;">推荐话题
					<view class="pos-abs titleline">
					</view>
				</span>
			</view>
			
			<ul class="recomlist">
				<li class="recomli" v-for="(item,index) in comNewsList" :key="index">
					<view class="leftno noone">{{index+1}}</view>
					<view class=" righttext lineclamp2" @click="toNews(item.id)">
						{{item.name}}
					</view>
				</li>
			</ul>
		</view>

		<!-- 		<view class="hotnewbox">
			<view class="head" style="">
				<view class="headtext" @click="checkTab('1')">
					<span :class="ishot?'clithis':'noclithis'" style="z-index: 99;position: relative;">最热</span>
					<view v-show="ishot" class="pos-abs titleline">
					</view>
				</view>
				<view class="headtext" @click="checkTab('2')">
					<span :class="!ishot?'clithis':'noclithis'" style="z-index: 99;position: relative;">最新</span>
					<view v-show="!ishot" class="pos-abs titleline">
					</view>
				</view>
			</view>
			<ul class="hotnewlist">
				<li @click="toNews(item.id)" class="hotnewli" v-for="(item,index) in newsList" :key="index">
					<view class="top noone">
						<view class="top_left">
							<view class="noimg justify-center align-center">
								<image src="@/static/images/home/noimg.png" style="width: 98rpx;height: 98rpx;"></image>
							</view>
						</view>
						<view class="top_right">
							<view class="color303b39 lineclamp2"
								style="line-height: 46rpx;font-size: 36rpx;font-weight: 800;" @click="tonewspage(item)">
								{{item.name}}
							</view>
							<view class=" lineclamp3"
								style="margin-top: 8rpx;font-weight: 500;font-size: 28rpx;color: #576260;line-height: 40rpx;"
								v-html="item.content.replace(/<\/?p>|<br>/gi, '').slice(0,150)">
							</view>

						</view>
					</view>
					<view class=" bot justify-between fz24" style="margin-top: 13rpx;color: #7E8987;">
						<view class="">
							已帮助{{item.hits}}人
						</view>
						<view class="">
							{{item.createTime}}
						</view>
					</view>
				</li>
			</ul>
		</view> -->
		<HotnewsCom></HotnewsCom>
		<FixedFoot :typeid="0"></FixedFoot>
		<u-modal v-model="versionshow" :show-cancel-button="false" :confirm-text="'确认'" @confirm="upversion"
			content="检测到有新版本请升级后使用"></u-modal>
		<u-toast ref="uToast" />
		<u-popup :mask-close-able="false" width="250rpx" height="250rpx" border-radius="14" v-model="popshow"
			mode="center">
			<view style="height: 100%;" class="justify-center align-center">
				<!-- <u-line-progress :percent="vpercentage" activeColor="#37EBC2"></u-line-progress> -->
				<u-circle-progress type="primary" :percent="vpercentage" activeColor="#37EBC2">
					<text class='u-progress-info'>下载中{{vpercentage}}%</text>
				</u-circle-progress>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		selectIndexRecommend,
		selectNewsList,
		getVersion,
		getdisNewsList,
		getDrugList,
		getInvitationList,
		getotherlist
	} from '@/api/api.js'
	import {
		getInfo
	} from '@/api/login'
	// import { element } from 'prop-types';
	import FixedFoot from '../layouts/fixedfoot.vue';
	import NavHeader from '../layouts/navheader.vue';
	import DrugList from '../components/generalcom/druglist.vue';
	import typenews from '../components/generalcom/typenews.vue';
	import HotnewsCom from '../components/generalcom/hotnewcom.vue';


	export default {
		components: {
			FixedFoot,
			NavHeader,
			DrugList,
			typenews,
			HotnewsCom
		},
		onLoad() {
			// 获得屏幕最大高度
			let systemInfo = uni.getSystemInfoSync();
			this.maxHeight = systemInfo.windowHeight + "px";
			//获取推荐新闻3条。
			this.selectIndexRecommend();
		},
		data() {
			return {
				show: false,
				versionshow: false,
				url: '',
				vpercentage: 0,
				popshow: false,
				maxHeight: '',
				placeholderStyle: "color:#7E8987;font-size:32rpx",
				drugname: '',
				therapy: '',
				effect: '',
				// 轮播
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				ishot: true,
				comNewsList: [],
				drugList: [],
				newsList: [],
				creNewsList: [],
				hisNewsList: [],
				zsNewsList: [],
				znNewsList: [],
				userDocument: {},
				diseaseList: [],
			}
		},
		created() {
			this.getUser()
			this.isversion()
		},
		methods: {
			isversion() {
				let versionobj = uni.getSystemInfoSync();
				let version = versionobj.appWgtVersion ? versionobj.appWgtVersion : versionobj.appVersion
				version = 'v' + version
				getVersion().then(res => {
					this.url = res.data.url
					if (res.data.version != version) {
						// 升级到正式环境要将下面的打开
						// this.versionshow = true
					} else {
						return
					}

				})
			},
			// 升级新版本
			upversion() {
				this.downloadAndInstall(this.url)
			},
			downloadAndInstall(url) {
				// App端下载更新
				const downloadTask = uni.downloadFile({
					url: url,
					success: (downloadRes) => {
						if (downloadRes.statusCode === 200) {
							plus.runtime.install(downloadRes.tempFilePath, {
								force: false // 是否强制更新
							}, () => {
								plus.runtime.restart();
							}, (err) => {
								uni.showToast({
									title: '安装失败',
									icon: 'none'
								});
								console.error('安装失败:', err);
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						});
						console.error('下载失败:', err);
					}
				});
				this.popshow = true
				// 可选：显示下载进度
				downloadTask.onProgressUpdate((res) => {
					this.vpercentage = res.progress
					// 可以在这里更新UI显示进度
				});

			},

			getUser() {
				getInfo().then(res => {
					this.userDocument = res.userDocument
					let dis = {
						"diseaseId": res.userDocument.diseaseId
					}
					this.diseaseList = []
					this.diseaseList.push(dis);
					this.getDrugList();
					this.zsSelectNewsList()
					this.znSelectNewsList()
				})
			},
			getDrugList() {
				let param = {
					"pageNum": 1,
					"pageSize": 6,
					"state": "1",
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"drugDiseaseList": this.diseaseList.length > 0 ? this.diseaseList : null
				}

				getDrugList(param).then(res => {
					if (res.code == 200) {
						this.drugList = res.rows
					}
				})
			},
			toWxkf() {
				// window.open('https://work.weixin.qq.com/ca/cawcdedcf41d9a6af6')
				if (plus.os.name == 'Android') {
					//安卓
					if (
						plus.runtime.isApplicationExist({
							//查看安卓系统手机有没有下载这款app
							pname: 'com.tencent.mm' //微信app云打包的包名
						})
					) {
						//安装了app
						plus.runtime.openURL(
							'https://work.weixin.qq.com/ca/cawcdedcf41d9a6af6',
							function(res) {}
						);
					} else {
						//未安装app
						uni.showModal({
							title: '提示',
							content: '您还没有此APP,去下载',
							success: function(res) {
								if (res.confirm) {
									plus.runtime.openURL(
										'https://a.app.qq.com/o/simple.jsp?pkgname=com.tencent.mm',
										function(res) {});
								} else if (res.cancel) {}
							}
						});
					}
				} else if (plus.os.name == 'iOS') {
					//苹果
					//因为ios查不到B款app在ios系统手机里面，其实下载了，也是检测不到，所以就不检测了
					//直接打开微信app，微信pp没有的话，会进入回调报错，我们在回调去打开下载链接
					plus.runtime.launchApplication({
							action: 'https://work.weixin.qq.com/ca/cawcdedcf41d9a6af6'
						},
						function(e) {
							uni.showModal({
								title: '提示',
								content: '您还没有此APP,去下载',
								success: function(res) {
									if (res.confirm) {
										plus.runtime.openURL(
											'https://a.app.qq.com/o/simple.jsp?pkgname=com.tencent.mm',
											function(res) {});
									} else if (res.cancel) {}
								}
							});
						}
					);
				}


			},
			tomore(type) {
				let moreurl = ''
				if (type == 1) {
					moreurl = '/pages/knowledge/detail?id=' + this.userDocument.diseaseId
				} else if (type == 2) {
					moreurl = '/pages/knowledge/diseaseGuide?id=' + this.userDocument.diseaseId
				} else {
					moreurl = '/pages/knowledge/druglist?id=' + this.userDocument.diseaseId
				}
				uni.navigateTo({
					url: moreurl
				})
			},
			towxcode() {
				uni.navigateTo({
					url: '/pages/wxcode'
				})
			},
			toServe() {
				uni.navigateTo({
					url: '/pages/mine/messagelist'
				})
			},
			toCasepage() {
				uni.navigateTo({
					url: '/pages/mine/casePage'
				})
			},

			selectIndexRecommend() {
				selectIndexRecommend().then(response => {
					this.comNewsList = response.data
				})
			},
			//疾病知识文章
			zsSelectNewsList() {
				let param = {
					"pageNum": 1,
					"pageSize": 5,
					"type":"02",
					"state":"1",
					"orderByColumn" : "create_time",
					"isAsc":"desc",
					"diseaseId":this.userDocument.diseaseId
				}
				getotherlist(param).then(response => {
					this.zsNewsList = response.rows
				})

			},
			//疾病指南文章
			znSelectNewsList() {
				let param = {
					"pageNum": 1,
					"pageSize": 5,
					"type":"01",
					"state":"1",
					"orderByColumn" : "create_time",
					"isAsc":"desc",
					"diseaseId":this.userDocument.diseaseId
				}
				getotherlist(param).then(response => {
					this.znNewsList = response.rows
				})
			},



			next: function(e) {


			},
			toNews(id) {
				uni.navigateTo({
					url: '/pages/knowledge/drugnews?id=' + id,
				});
			},
			backpage() {
				uni.navigateBack({
					delta: 1
				});
			},
			chooseswiper(index) {
				let pages = [
					'/pages/knowledge/detail?id=' + this.userDocument.diseaseId,
					'/pages/serve/findDrug',
					'/pages/serve/clinical',
					'/pages/serve/seeDoctor',
					'/pages/serve/consultation',
					'/pages/knowledge/druglist?id='+ this.userDocument.diseaseId,
				]
				uni.navigateTo({
					url: pages[index]
				});
			},



		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .is-input-border {
		border: none;
	}

	::v-deep uni-swiper {
		margin-top: 68rpx;
		height: 180rpx !important;
		padding: 0 28rpx;
	}

	::v-deep uni-swiper .uni-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		background-color: #E8EBEB;
	}

	::v-deep uni-swiper .uni-swiper-dot-active {
		background-color: #00D9B2;
	}

	::v-deep .uni-easyinput__content {
		background: transparent !important;
	}

	::v-deep .uni-input-input {
		font-size: 32rpx;
	}

	::v-deep uni-checkbox .uni-checkbox-input {
		background: transparent;
	}

	::v-deep uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		color: #fff;
		border-color: #00D9B2;
		background: #00D9B2;
	}

	::v-deep .uni-icons {
		font-size: 52rpx !important;
	}

	::v-deep uni-toast {
		font-size: 24rpx;
	}

	::v-deep .input-placeholder {
		font-size: 28rpx;
		color: #B8C3C1 !important;
	}

	.pagebody {
		box-sizing: border-box;
		padding-bottom: 98rpx;

		.headbox {
			background-image: url('/static/images/login/otherbg.png');
			position: relative;
			background-repeat: no-repeat;
			background-size: cover;
			border-radius: 0 0 24rpx 24rpx;

			.topbgbox {
				box-sizing: border-box;
				padding: 36rpx 24rpx;

				.searchbox {
					width: 516rpx;
					height: 60rpx;
					background: #FFFFFF;
					border-radius: 60rpx;
					border: 2rpx solid rgba(0, 217, 178, 0.2);
					padding: 0 24rpx;

					.searchinput {
						font-size: 28rpx
					}

				}

				.left {
					width: 328rpx;
					height: 270rpx;
					background: url(@/static/images/home/leftbg.png) no-repeat;
					background-size: cover;
					border-radius: 24rpx;
					box-sizing: border-box;
					padding: 31rpx 28rpx;

					.gkjr {
						width: 170rpx;
						height: 55rpx;
						background: linear-gradient(133deg, #FFB0B0 0%, #FF4B96 100%);
						box-shadow: 0rpx 2rpx 5rpx 0rpx rgba(255, 77, 151, 0.2), inset 0px 2px 6px 0px rgba(253, 233, 244, 0.5);
						border-radius: 55rpx;
						margin-top: 15rpx;
						text-align: center;
						line-height: 55rpx;
						color: #fff;
						text-shadow: 0px 0px 2px #FF4E97;
						font-weight: 800;
						font-size: 25rpx;
					}
				}

				.right {
					width: 358rpx;
					height: 270rpx;

					.toplm {
						width: 358rpx;
						height: 126rpx;
						background: url(@/static/images/home/topbg.png) no-repeat;
						background-size: cover;
						border-radius: 24rpx;
						padding: 21rpx 26rpx;
						box-sizing: border-box;
					}

					.botlm {
						width: 358rpx;
						height: 126rpx;
						background: url(@/static/images/home/xxtx.png) no-repeat;
						background-size: cover;
						border-radius: 24rpx;
						padding: 21rpx 26rpx;
						box-sizing: border-box;
					}

				}

				.inputbox {
					border-bottom: 1px solid #B8C3C1;
					padding-bottom: 10rpx;
				}

				.loginbtn {
					// position: absolute;
					// bottom: 0;
					margin-top: 96rpx;

					uni-button {
						border-radius: 98rpx;
						width: 668rpx;
					}

					uni-button:after {
						border: none;
					}

					.button {
						background-color: #00D9B2;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 36rpx;

					}
				}
			}
		}

		.recommend {
			border-radius: 24rpx;
			margin-top: 16rpx;
			background: #fff;
			box-sizing: border-box;
			padding: 32rpx 24rpx;

			.title {
				position: relative;
				padding: 0 16rpx;
				display: flex;
				justify-content: space-between;

				.titleline {
					bottom: 0;
					left: 0;
					height: 16rpx;
					width: 100%;
					background: #00D9B2;
					border-radius: 50rpx;
					z-index: -1;
				}

				.more {
					display: flex;
					align-items: center;
					font-weight: 500;
					font-size: 24rpx;
					color: #576260;
				}
			}

			.recomlist .recomli:last-child {
				border-bottom: none;
			}

			.recomlist {
				.recomli {
					padding: 24rpx 0;
					display: flex;
					border-bottom: 1rpx dashed #D7DDDC;

					.leftno {
						width: 30rpx;
						height: 30rpx;
						color: #fff;
						font-weight: bold;
						font-size: 24rpx;
						line-height: 30rpx;
						text-align: center;
						border-radius: 6rpx;
						flex-shrink: 0;
						margin-top: 13rpx;
						margin-right: 18rpx;
					}

					.leftbox {
						width: 40rpx;
						height: 42rpx;
						color: #fff;
						font-weight: bold;
						font-size: 24rpx;
						line-height: 42rpx;
						text-align: center;
						border-radius: 6rpx;
						flex-shrink: 0;
						margin-top: 13rpx;
						margin-right: 18rpx;
						background: linear-gradient(252deg, #00D9B2 0%, #00F3C8 100%);
					}

					.righttext {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 36rpx;
						color: #303B39;
						line-height: 56rpx;
						text-align: left;
					}

					.noone {
						background: linear-gradient(357deg, #FC1C12 0%, #FD6F23 100%);
					}

					.notwo {
						background: linear-gradient(357deg, #FC4A14 0%, #FF9F1B 100%);
					}

					.nothree {
						background: linear-gradient(357deg, #FB7511 0%, #FECA18 100%);
					}

				}
			}
		}

		.hotnewbox {
			border-radius: 24rpx 24rpx 0 0;
			margin-top: 16rpx;
			background: #fff;
			box-sizing: border-box;
			padding: 40rpx 24rpx;

			.head {
				display: flex;
				align-items: center;

				.headtext {
					position: relative;
					width: max-content;
					padding: 0 16rpx;
					margin-right: 45rpx;

					.titleline {
						bottom: 0;
						left: 0;
						height: 16rpx;
						width: 100%;
						background: #00D9B2;
						border-radius: 50rpx;
						z-index: 1;
					}

					.clithis {
						font-weight: 800;
						font-size: 40rpx;
						color: #303B39;
					}

					.noclithis {
						font-weight: 400;
						font-size: 36rpx;
						color: #303B39;

					}
				}

			}

			.hotnewlist .hotnewli:last-child {
				border-bottom: none;
			}

			.hotnewlist {
				.hotnewli {
					padding: 24rpx 0;
					border-bottom: 1rpx dashed #D7DDDC;

					.top {
						display: flex;

						.top_left {
							flex-shrink: 0;
							margin-right: 16rpx;
							width: 248rpx;
							height: 176rpx;

							.noimg {
								width: 248rpx;
								height: 176rpx;
								background: linear-gradient(147deg, #DEFFF9 0%, #A1F5E4 100%);
								border-radius: 24rpx
							}
						}

					}
				}
			}
		}
	}
</style>